<template>
  <div class="main">
    <!-- 未登录的显示页面 -->
    <div v-if="!login">
      <img src="@/assets/unlogin.png" alt="请先登录" />
      <h1>PLEASE LOG IN FIRST</h1>
      <button @click="toLogin">去登陆</button>
    </div>
    <!-- 登录了的显示页面 -->
    <div v-if="login">
      <UserIntroduction :userId="userId" />
      <ul class="choiceList">
        <li @click="toLately">最近</li>
        <li @click="toNode">作品</li>
        <li @click="toCollect">收藏</li>
      </ul>
      <router-view name="userList" :userId="userId"></router-view>
    </div>
  </div>
</template>

<script>
import { getCookie } from "@/tool/ToolCookie";
import UserIntroduction from "@/components/userSpaceValue/UserIntroduction.vue";
export default {
  data() {
    return {
      userId: this.$route.query.id,
      // 登录标志位
      login: false,
    };
  },
  methods: {
    // 子路由跳转到最近
    toLately() {
      this.$router.push({
        path: "/main/myNode/lately",
        query: { id: this.$route.query.id },
      });
    },
    // 子路由跳转到我的作品
    toNode() {
      this.$router.push({
        path: "/main/myNode/node",
        query: { id: this.$route.query.id },
      });
    },
    // 子路由跳转到我的收藏
    toCollect() {
      this.$router.push({
        path: "/main/myNode/collect",
        query: { id: this.$route.query.id },
      });
    },
    // 跳转登录页面
    toLogin() {
      this.$router.push({
        path: "/login",
      });
    },
  },
  components: {
    UserIntroduction,
  },
  mounted() {
    // 判断是否登录
    if (getCookie("userId") == null) {
      // 设置未登录标志，显示未登录页面
      this.login = false;
      return; // 未登录就不请求用户信息
    }
    // 设置已登录标志，显示登录页面
    this.login = true;
  },
};
</script>

<style scoped>
.main {
  height: auto;
  min-height: 600px;
  padding-bottom: 30px;
}
.choiceList {
  height: 50px;
  border-bottom: 0.5px solid #55556d;
  padding-left: 20px;
}
.choiceList li {
  color: #fff;
  display: inline-block;
  text-decoration: none;
  line-height: 50px;
  padding: 0 20px;
  cursor: pointer;
}

img {
  display: block;
  margin: 100px auto 0 auto;
  height: 300px;
  width: 400px;
}
h1 {
  text-align: center;
  color: #fff;
}
button {
  display: block;
  margin: 10px auto;
  height: 80px;
  width: 200px;
  background-color: #2ecc71;
  border: #55556d solid 2px;
  border-radius: 20px;
  font-size: xx-large;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
}
</style>